<!--
 * @description 人物库分类列表组件
 * @date 2022/11/12
 -->
<template>
  <div class="figure-classify-comp">
    <section class="classify-container" :style="{marginTop:top}">
      <ul>
        <li v-for="(item, index) in classifys" :key="index" @click="toDetail(item)">
          <van-image class="craftsman-cover" :src="setImgPath(item.imgId, item.imgIdUrl, 1)" :fit="imgType">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error>
              <img src="../../images/base/default-placeholder.png" alt>
            </template>
          </van-image>
          <p class="info-item etc">{{ item.classifyName }}</p>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import mixins from '../mixins'
export default {
  name: 'FigureClassifyComp',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    varInfo: {
      type: Object,
      default: () => { }
    },
    relation: {
      type: [Object, undefined],
      default: () => {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      classifys: [],
      origin: ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      if (this.isInitData) {
        this.origin = this.varInfo['${route|o}']
        if (this.origin === 'saas') {
          await this.getDataByCode('dataList4SAAS')
        } else {
          await this.getDataByCode('dataList4Company')
        }
      } else {
        this.classifys = [
          {
            'id': 'Z1266986914096594945',
            'classifyType': 'FLGL_GJRW',
            'classifyName': '南粤工匠',
            'parentId': '-1',
            'ptress': ',-1,Z1266986914096594945,',
            'sort': 1,
            'status': 'ZT01',
            'statusValue': '启用',
            'imgId': '',
            'children': [],
            'bid': '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
          }, {
            'id': 'Z1266987066848952321',
            'classifyType': 'FLGL_GJRW',
            'classifyName': '天府工匠',
            'parentId': '-1',
            'ptress': ',-1,Z1266987066848952321,',
            'sort': 1,
            'status': 'ZT01',
            'statusValue': '启用',
            'imgId': '',
            'children': [],
            'bid': '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
          }, {
            'id': 'Z1266987114341056513',
            'classifyType': 'FLGL_GJRW',
            'classifyName': '余姚工匠',
            'parentId': '-1',
            'ptress': ',-1,Z1266987114341056513,',
            'sort': 1,
            'status': 'ZT01',
            'statusValue': '启用',
            'imgId': '',
            'children': [],
            'bid': '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
          }, {
            'id': 'Z1266987230393253890',
            'classifyType': 'FLGL_GJRW',
            'classifyName': '有色工匠',
            'parentId': '-1',
            'ptress': ',-1,Z1266987230393253890,',
            'sort': 1,
            'status': 'ZT01',
            'statusValue': '启用',
            'imgId': '',
            'children': [],
            'bid': '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
          }]
      }
    },
    setData(result) {
      const { dataList4Company, dataList4SAAS } = result
      this.classifys = dataList4Company.data || dataList4SAAS.data
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.figure-classify-comp{
  .classify-container {
    width: rem(750);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    ul {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding: 0 rem(30);
      justify-content: space-between;
      li {
        flex: 0 0 auto;
        width: rem(162.5*2);
        display: flex;
        flex-direction: column;
        padding-bottom: rem(30);
        .van-image, img {
          width: 100%;
          height: rem(87*2);
          border-radius: rem(12);
          .van-image__error{
            > img {
              width: rem(120);
              height: rem(120);
            }
          }
        }
        .info-item {
          text-align: center;
          font-size: rem(32);
          margin-top: rem(20);
        }
      }
    }
  }
}
</style>
